<!--
 * @Author: your name
 * @Date: 2021-10-22 17:12:15
 * @LastEditTime: 2021-10-28 11:01:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \estore-manage\src\pages\base\order\orderList.vue
-->
<template>
    <div class="orderList">
        <el-menu mode="horizontal"
            
            background-color="#f4f5f2"
            active-text-color="#ffd04b"
        >
            <el-menu-item @click="addOrder">所有订单</el-menu-item>
            <el-menu-item @click="waitPay">待支付</el-menu-item>
            <el-menu-item @click="wait">待派单</el-menu-item>
            <el-menu-item @click="waitOrderTaking">待接单</el-menu-item>
            <el-menu-item @click="waitService">待服务</el-menu-item>
            <el-menu-item @click="waitConfirm">待确认</el-menu-item>
            <el-menu-item @click="complete">已完成</el-menu-item>
        </el-menu>
        <!-- 表单信息 -->
        <div class="table-Text">
            <el-table :data="orderList.list">
                <el-table-column prop="id" label="订单编号"></el-table-column>
                <el-table-column prop="orderTime" label="下单时间" min-width='120'> 
                    <template v-slot="scope">{{
                        $moment(scope.row.orderTime).format("YY-MM-DD-HH:mm:ss")
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="total" label="总价">
                    <template v-slot="scope">
                        $
                        {{scope.row.total}}
                        元
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态"></el-table-column>
                <el-table-column prop="customerId" label="顾客id"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button type="text" @click="detailHandler(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
         <!--/分页  -->
           <div class="page">
                <el-pagination
                    class="pages"
                    small
                    hide-on-single-page
                background
                @current-change='pageChange'
                layout="prev, pager, next"
                :page-size='orderList.pageSize'
                :curren-page='orderList.page'
                :total="orderList.total">
                </el-pagination>

           </div>
        
    </div>
</template>
<script>
import router from '@/router';
import {get} from '../../../utils/request'
import _ from 'lodash'

export default {
    data(){
        return {
            orderList:{},
            content:{},
            form:{},
            params: {
                page: 1,
                pageSize: 10,
        }, //参数
        }
    },
    methods:{
       
        loadOrderList(){
            let url = "/order/pageQuery";
            get(url,this.params).then(resp=>{
               
                let orderList = resp.data;
                // console.log(orderList);
                this.orderList = orderList;
                this.content = _.cloneDeep(orderList)
               
                console.log("loadContent",this.content);
                
            })


        },
        //分页改变函数
        pageChange(page){
            this.params.page=page;
            this.loadOrderList()
        },
        // 所有订单
        addOrder(){

           
            this.loadOrderList();

        },
        // 待支付
        waitPay(){
            console.log("content",this.content);
            let orderList = _.cloneDeep(this.content.list)//深克隆，然后就可以改变视图了！
           
            this.orderList.list=orderList.filter((item)=>{
                return item.status=="待支付"
            })
            console.log(this.orderList.list);
        },
        // 待派定
        wait(){
            console.log("待派定",this.content);
             let orderList  = this.content.list;
            this.orderList.list= orderList.filter((item)=>{
                return item.status=="待派单"
            })
        },
        // 待接单
        waitOrderTaking(){
             let orderList  = this.content.list;
            this.orderList.list=  orderList.filter((item)=>{
                return item.status=="待接单"
            })

        },
        // 待服务
        waitService(){
            let orderList  = this.content.list;
            this.orderList.list=  orderList.filter((item)=>{
                return item.status=="待服务"
            })
        },
        waitConfirm(){
            let orderList  = this.content.list;
            this.orderList.list=  orderList.filter((item)=>{
                return item.status=="待确认"
            }) 
        },
        complete(){
            let orderList  = this.content.list;
            this.orderList.list=  orderList.filter((item)=>{
                return item.status=="已完成"
            }) 
        },

        detailHandler(row){
            console.log(row);
            this.$router.push({
               name:'orderDetails',
               params:{
                   name:'orderDetails',
                   params:row
               }
            })
        }
    },
     mounted(){
            this.loadOrderList();
        }
}
</script>
